<template>
  <!-- 底部导航栏 -->
  <div class="tab_bar" v-if="isShowTab">
    <ul class="tab_bar_container">
      <li
        v-for="(item, index) in tabBarList"
        :key="index"
        @click="goPage(item.path)"
      >
        <div class="tab_bar_icon">
          <img :src="item.path == curMenu ? item.activedIcon : item.icon" alt="" />
        </div>
        <div
          class="tab_bar_text"
          :class="{ actived_bar: item.path == curMenu }"
        >
          {{ item.text }}
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import HomeIcon from "@/assets/tabBar/home.png";
import HomeActivedIcon from "@/assets/tabBar/home_actived.png";
import MarketIcon from "@/assets/tabBar/market.png";
import MarketActivedIcon from "@/assets/tabBar/market_actived.png";
import DealIcon from "@/assets/tabBar/deal.png";
import DealActivedIcon from "@/assets/tabBar/deal_actived.png";
import AssetsIcon from "@/assets/tabBar/assets.png";
import AssetsActivedIcon from "@/assets/tabBar/assets_actived.png";
import { useRouter, useRoute } from "vue-router";

// 获取路由对象
const router: any = useRouter();
const route: any = useRoute();
// 当前菜单
const curMenu = ref("/");
// 是否隐藏底部导航栏
const isShowTab = ref(true)

// 导航栏列表
const tabBarList = ref([
  { text: "首页", icon: HomeIcon, activedIcon: HomeActivedIcon, path: "/home" },
  {
    text: "行情",
    icon: MarketIcon,
    activedIcon: MarketActivedIcon,
    path: "/market",
  },
  { text: "交易", icon: DealIcon, activedIcon: DealActivedIcon, path: "/deal" },
  {
    text: "资金",
    icon: AssetsIcon,
    activedIcon: AssetsActivedIcon,
    path: "/assets",
  },
]);

// 切换页面
const goPage = (path: string) => {
  curMenu.value = path;
  router.push(path);
};

// 监听当前路由
watch(
  () => route.name,
  (newVal) => {
    let activedPage = ["home", "market", "deal", "assets"];
    isShowTab.value = activedPage.includes(newVal)
    curMenu.value = `/${newVal}`;
  }
);

// 数据初始化
onMounted(() => {
  curMenu.value = route.name == "/" ? "/home" : `/${route.name}`;
});
</script>

<style lang="scss" scoped>
.tab_bar {
  width: 100vw;
  background-color: #141515;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1px solid #292c2f;
  padding: 10px 26px;
  .tab_bar_container {
    display: flex;
    justify-content: space-between;
    li {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      .tab_bar_text {
        font-size: 13px;
        margin-top: 2px;
      }
    }
  }
}
</style>
